<template>
    <div>
        <!--标题 列表 -->
        <van-nav-bar title="乐购" left-text="返回" left-arrow  @click-left="onClickLeft"/>
         <!-- 上拉加载list -->
         <div class="brandlist">
    <van-list v-model="loading" :finished="finished"  finished-text="没有更多了"  @load="onLoad" >
        <ul>
            <li v-for="item in list" :key="item.id" :style=" `background:url(${item.app_list_pic_url})`">
                <!-- <img :src="item.app_list_pic_url" alt=""> -->
                <p>{{item.name}}|{{item.floor_price}}元起</p>
            </li>
        </ul>
    </van-list>
         </div>
    </div>
</template>

<script>
import {listaction} from "@/api/home/brand/brandlist"
    export default {
        data(){
            return{
                page:1,
                list:[],
                loading:false,
                finished:false
            }
        },
       
        methods:{
            onClickLeft(){
                this.$router.go(-1)
            },
            onLoad(){
               listaction({
                   page:this.page
               }).then(res=>{
                     console.log(res);
                  this.list.push(...res.data)    
                  this.page+=1;
                  this.loading=false;
                //   画到最后一页停止加载
                if(res.total==this.page-1){
                    this.finished=true;
                }
               })
                   
            }
        }
    }
</script>

<style lang="scss" scoped>
.brandlist{
    display: flex;
    justify-items:center;
    flex-wrap: wrap;
      background-color: #f4f4f4;
    li{
        width: 375px;
        height: 177px;
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
      p{
            color: steelblue;
            font-family: Arial, Helvetica, sans-serif;
            font-size: .46667rem;
            font-weight: 700;
      }
    }
}
</style>